<!--个人中心-->
<div class="exciseTableDiv over-y" style="padding: 10px 24%">
  <p class="tittleBrand">
    <b [class.activeTitle]="!isPwd" (click)="clickTitle(false)">基本信息</b>
    <b [class.activeTitle]="isPwd" (click)="clickTitle(true)">个人密码</b>
  </p>
  <!--老师个人中心--基本信息-->
  <form nz-form *ngIf="!isPwd" [formGroup]="validateForm">
    <div style="width:64%; float:left;">
      <nz-form-item>
        <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSm]="24" [nzXs]="24">
          <input nz-input [(ngModel)]="userEdit.name" formControlName="name" placeholder="请输入姓名"/>
          <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">
            姓名不能为空！
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="24" [nzXs]="24">工号</nz-form-label>
        <nz-form-control [nzSm]="24" [nzXs]="24">
          <input nz-input [(ngModel)]="userEdit.number" formControlName="number"  disabled placeholder="请输入工号"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="24" [nzXs]="24">部门职务</nz-form-label>
        <nz-form-control [nzSm]="24" [nzXs]="24">
          <nz-tree-select
            style="width: 50%;"
            formControlName="orgId"
            [(ngModel)]="userEdit.orgId"
            [nzDefaultExpandAll]="true"
            [nzNodes]="nodes"
            nzShowSearch
            nzPlaceHolder="请选择部门"
            nzDisabled
          >
          </nz-tree-select>
          <nz-select  [(ngModel)]="userEdit.position" nzDisabled formControlName="position" style="width: 50%;padding-left:10px;">
            <nz-option *ngFor="let po of positionList;" [nzValue]="po.keyCode" [nzLabel]="po.keyCode"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="24" [nzXs]="24">职称</nz-form-label>
        <nz-form-control [nzSm]="24" [nzXs]="24">
          <nz-select  [(ngModel)]="userEdit.title"  formControlName="title" style="width: 50%;">
            <nz-option *ngFor="let title of titleList;" [nzValue]="title.keyCode"
                       [nzLabel]="title.keyCode"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="24"  [nzXs]="24">性别</nz-form-label>
        <nz-form-control [nzSm]="24" [nzXs]="24">
          <nz-select [(ngModel)]="userEdit.sex" formControlName="sex" style="width: 50%;">
            <nz-option *ngFor="let item of filterSexArr;" [nzValue]="item.value" [nzLabel]="item.text"></nz-option>
          </nz-select>
          <nz-form-explain *ngIf="validateForm.get('sex')?.dirty && validateForm.get('sex')?.errors">
            性别不能为空！
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="24" [nzXs]="24">联系电话</nz-form-label>
        <nz-form-control [nzSm]="24" [nzXs]="24">
          <input nz-input [(ngModel)]="userEdit.telphone" formControlName="telphone"
                 placeholder="请输入联系电话"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="24" [nzXs]="24" nzFor="email">邮箱</nz-form-label>
        <nz-form-control [nzSm]="24" [nzXs]="24">
          <input nz-input [(ngModel)]="userEdit.email" formControlName="email" id="email" placeholder="请输入邮箱"/>
          <nz-form-explain *ngIf="validateForm.get('email')?.dirty && validateForm.get('email')?.errors">
            {{validateForm.get('email')?.errors.emailValidator.errorMsg}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <button nz-button nzType="primary" [disabled]="validateForm.invalid" (click)="updateUser()">更新信息</button>
      </nz-form-item>
    </div>
    <div style="width:27%;float: left;margin-left:8%;">
      <div class="userPhoto">
        <span class="line-4">头像</span>
        <img src="{{avatarUrl ? avatarUrl:userPhoto}}" alt="">
        <nz-upload
          [nzShowUploadList]="false"
          [nzBeforeUpload]="beforeUpload"
          [nzHeaders]="headerInfo"
          [nzAction]="uploadUrl"
          [nzData]="{'moduleName': 'teacher'}"
          (nzChange)="handleChange($event)"
          nzAccept="'.png,.jpg,.jpeg,.bmg,.gif'"
          nzFileType="image/png,image/jpg,image/jpeg,image/bmp,image/gif"
        >
          <button nz-button><i nz-icon type="upload"></i><span>更换头像</span></button>
        </nz-upload>
      </div>
    </div>
  </form>
  <!--个人密码-->
  <form nz-form [formGroup]="validatePass" *ngIf="isPwd">
    <nz-form-item>
      <nz-form-label [nzSm]="24" [nzXs]="24" nzFor="oldPass" nzRequired>旧密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" id="oldPass" formControlName="oldPass" placeholder="请输入"/>
        <nz-form-explain *ngIf="validatePass.get('oldPass')?.hasError('required')">
          请输入旧密码！
        </nz-form-explain>
        <nz-form-explain *ngIf="validatePass.get('oldPass')?.hasError('duplicate')">
          旧密码不正确！
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="24" [nzXs]="24" nzFor="newPass" nzRequired>新密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" id="newPass" formControlName="newPass" placeholder="请输入"/>
        <nz-form-explain
          *ngIf="validatePass.get('newPass')?.dirty && validatePass.get('newPass')?.errors">
          {{validatePass.get('newPass')?.errors.letterNumberPwd.errorMsg}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="24" [nzXs]="24" nzFor="resPass" nzRequired>确认新密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" formControlName="resPass" id="resPass" placeholder="请输入"/>
        <nz-form-explain
          *ngIf="validatePass.get('resPass')?.dirty && validatePass.get('resPass')?.errors"
        >
          <ng-container *ngIf="validatePass.get('resPass')?.hasError('required')">
            请确认新密码！
          </ng-container>
          <ng-container *ngIf="validatePass.get('resPass')?.hasError('confirm')">
            两次密码输入不一致！
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <p style="margin-top:20px;">
      <button nz-button nzType="primary" [disabled]="validatePass.invalid" (click)="updatePwd()">更新密码</button>
    </p>
  </form>
</div>
